
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="assets/ico/favicon.ico" type="image/x-icon" />
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/jquery.mmenu.css" rel="stylesheet">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/plugins/jquery-ui/css/jquery-ui-1.10.4.min.css" rel="stylesheet">
    <link href="assets/css/style.min.css" rel="stylesheet">
    <link href="assets/css/add-ons.min.css" rel="stylesheet">
    <title>员工信息</title>
</head>
<body>
<div class="row">
    <div class="col-lg-10">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2><i class="fa fa-table red"></i><span class="break"></span><strong>员工信息</strong></h2>
                <div class="panel-actions">
                    <a href="table.html#" class="btn-setting"><i class="fa fa-rotate-right"></i></a>
                    <a href="table.html#" class="btn-minimize"><i class="fa fa-chevron-up"></i></a>
                    <a href="table.html#" class="btn-close"><i class="fa fa-times"></i></a>
                </div>
            </div>
            <div class="panel-body">
                <div align="center">
                    关键字查询：<input type="text" name="keyword"  /><input type="button" id="key" class="pagination"  value="搜索" />
                </div>
                <table class="table">
                    <thead>
                    <tr>
                        <th><input type='checkbox'>全选</th>
                        <th>员工姓名</th>
                        <th>员工性别</th>
                        <th>身份证号</th>
                        <th>状态</th>
                        <th>联系电话</th>
                        <th>所在部门</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <ul class="pagination">
                    共 <span id="maxPage" ></span>页/第 <span id="pageNum" name="pageNum" ></span> /<span id="pageNums"  ></span>页<br/>
                    <li> <a href="javascript:void(0);" class="first" id="home">首页</a></li>
                    <li><a href="javascript:void(0);" class="prev"   id="first">上一页</a></li>
                    <li><a href="javascript:void(0);" class="next"   id="next">下一页</a></li>
                    <li><a href="javascript:void(0);" class="last"   id="tail">尾页</a></li>
                </ul>

            </div>
            <a class="btn btn-success" href="addemployeeInfo.html">
                <i class="fa  fa-plus ">添加员工信息</i>
            </a>
        </div>

    </div><!--/col-->

</div><!--/row-->
</body>

<script src="assets/js/jquery-1.4.1.js"></script>
<script type="text/javascript">
    $(function(){

        //显示第一页数据
        query("","");
        //模糊查询
        $("#key").bind("click",function () {
            //清空
            closeTr();
            //拿到模糊查询文本框值
            var keyword=$("input[name=keyword]").val();
            var pageNum=1;
            query(keyword,pageNum);
        });

        // 下一页
        $("#next").bind("click",function(){
            closeTr();
            //拿到模糊查询值
            var keyword=$("input[name=keyword]").val();
            //拿到当前页
            var pageNum=$("#pageNum").html();
            pageNum=parseInt(pageNum);
            //拿到总页数
            var pages=$("#pageNums").html();
            pages=parseInt(pages);
            //判断pageNum的值
            if(pageNum==undefined){
                pageNum=1;
            }else if(pageNum>=pages){
                  pageNum=pages;
            }else {
                pageNum=pageNum+1;
            }
            query(keyword,pageNum);
        });
        // 上一页
        $("#first").bind("click",function(){
            closeTr();
            //拿到模糊查询值
            var keyword=$("input[name=keyword]").val();
            //拿到当前页
            var pageNum=$("#pageNum").html();
            pageNum=parseInt(pageNum);
            if(pageNum==undefined||pageNum<=1){
                pageNum=1;
            }else {
                pageNum=pageNum-1;
            }
            query(keyword,pageNum);
        });
        // 首页
        $("#home").bind("click",function(){
            closeTr();
            //拿到模糊查询值
            var keyword=$("input[name=keyword]").val();
            var pageNum=1;
            query(keyword,pageNum);

        });
        // 尾页
        $("#tail").bind("click",function(){
            closeTr();
            //拿到模糊查询值
            var keyword=$("input[name=keyword]").val();
            //拿到总页数
            var pages=$("#pageNums").html();
            pages=parseInt(pages);
            if(pages==undefined){
                  pages=1;
            }
            query(keyword,pages);
        });

        /**
         * 清除显示前的数据
         */
        function closeTr(){
            $("tr[name=source]").remove();
        }
        //显示数据
        function query(keyword,pageNum){
            //发送请求
            $.ajax({
                url:"/queryEmployeeinfo",
                type:"post",
                data:{"keyword":keyword,"pageNum":pageNum},
                success:function (employeeInfo) {
                    console.log(employeeInfo)
                    //总条数
                    $("#maxPage").html(employeeInfo.total);
                    total=employeeInfo.total;
                    // //当前页数
                    $("#pageNum").html(employeeInfo.pageNum);
                    $("#pageNums").html(employeeInfo.pages);
                    if(employeeInfo.list){
                        //循环显示数据
                        for(var i=0;i<employeeInfo.list.length;i++){
                            var emp=employeeInfo.list[i];
                            //判断在职状态
                            var sta=emp.status;
                            if(sta==0){
                                sta="未离职"
                            }else {
                                sta="离职"
                            }
                            $("tbody").after("<tr name='source'><td><input type='checkbox'></td><td>"+emp.employeename+"</td><td>"+emp.employeesex+"</td><td>"+emp.employeeidnumber+"</td><td>"+emp.employeephonenumber+"</td><td>"+emp.fkdepartmentinfo.departmentname+"</td><td>"+sta+"</td><td><a class=\"btn btn-info\" href=\"updateemployeeInfo.html?employeeid="+emp.employeeid+"\"><i class=\"fa fa-edit \"></i></a><a class=\"btn btn-danger\" href=\"/deleteemplyee?employeeid="+emp.employeeid+"\"><i class=\"fa fa-trash-o \"></i></a></td></tr>");
                        }
                    }else {
                        $("tbody").after("<tr><td>没有数据.......</td></tr>");
                    }
                }
            });
        }
    });
</script>
</html>